<template>
	<view class="content">
		<view class="head-top-1">
			<view class="btn" @tap="gotoHome">

			</view>
			<view class="list-box">
				<view v-for="(item,index) in arr" :key="index" class="arr-box" @tap="fenleiChoose(item,index)"
					:class="itemCurrent==index?'active':''">
					<image :src="item.src" class="pic"></image>
				</view>
			</view>
		</view>
		<view class="video-box-1">
			<video :src="playVideoSrc" controls class="video-box"></video>
		</view>
		<view class="head-top">



			<scroll-view scroll-x="true" class="gundong-box" :show-scrollbar="false">
				<view v-for="(i,index) in videoList" :key="index" :class="current==index?'active':''"
					@tap="playThis(i,index)" class="btn-box">
					{{index+1}}
				</view>
			</scroll-view>
		</view>
		<view class="item-box">
			<view class="item-box-top"></view>
			<view class="item-box-mid">
				<text class="item-box-mid-title">{{title}}</text>
				<u-parse :content="fuwenben"></u-parse>
			</view>
			<view class="item-box-bottom"></view>
		</view>

		<view class="weibu">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pcType: 1,
				itemCurrent: 0,
				current: 0,
				videoType: 3,
				playVideoSrc: '',
				videoList: [],
				fuwenben: '',
				title: '',
				arr: [{
						name: 'maya',
						src: 'https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/maya.png',
						videoType: 3
					},
					{
						name: 'ps',
						src: 'https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/ps.png',
						videoType: 5
					}, {
						name: 'ae',
						src: 'https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/ae.png',
						videoType: 7
					}, {
						name: 'nuke',
						src: 'https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/fc.png',
						videoType: 4
					}, {
						name: 'pr',
						src: 'https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/pr.png',
						videoType: 6
					},
				]
			};
		},
		onShow() {
			this.getVideoList()
		},
		methods: {
			getVideoList() {
				uni.request({
					url: this.$api + '/potato-studio/video/video/list',
					method: "GET",
					data: {
						pcType: this.pcType,
						videoType: this.videoType,
						pageSize: 1000,
						pageNo: 1
					}
				}).then((res) => {
					if (res[1].data.result.records.length <= 0) {
						uni.showToast({
							mask: true,
							title: '暂无视频列表',
							icon: 'none'
						})
					} else {
						this.videoList = res[1].data.result.records
						//默认播放第一个
						this.playVideoSrc = this.videoList[0].videoUrl
						this.title = this.videoList[0].title
						this.fuwenben = this.videoList[0].introduce
						console.log('this.videoList', this.videoList)
					}

				})

			},
			playThis(i, index) {
				console.log(index)
				this.current = index
				this.title = i.title
				this.playVideoSrc = i.videoUrl
				this.fuwenben = i.introduce
			},
			gotoHome() {
				uni.navigateBack({
					delta: 0
				})
			},
			fenleiChoose(item, index) {
				this.itemCurrent = index
				this.videoType = item.videoType
				this.getVideoList()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/xunhuan.png') repeat-y center top;
		background-size: 100% auto;
	}

	.head-top-1 {
		width: 750rpx;
		height: 508rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/head1.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.head-top {
		width: 750rpx;
		height: 508rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/head-top.png') no-repeat center center;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		// position: relative;
		margin-top: -416rpx;
	}

	.btn {
		width: 204rpx;
		height: 80rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/btn.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: 28rpx;
		margin-left: 28rpx;
	}

	.list-box {
		width: 690rpx;
		height: 170rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/list-arr.png') no-repeat center center;
		background-size: 100% 100%;
		margin: 0 auto;
		margin-top: -6rpx;
		display: flex;
		flex-direction: row;
		// align-items: center;
		justify-content: center;
		position: relative;
		z-index: 90;
	}

	.video-box-1 {
		width: 750rpx;
		height: 610rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/video-box.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: -300rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.video-box {
		width: 684rpx;
		height: 384rpx;
		margin: 0 auto;
		margin-top: 102rpx;
	}

	.item-box {
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		margin-top: -70rpx;
		position: relative;
	}

	.item-box-top {
		width: 736rpx;
		height: 58rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/video-alone/spjs-box-top.png') no-repeat center center;
		background-size: 100% 100%;
	}

	.item-box-mid {
		width: 636rpx;
		// height: auto;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/video-alone/spjs-box-mid.png') repeat-y center center;
		background-size: 100% auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 50rpx;

		text {
			padding: 0 60rpx;
			display: flex;
			flex-wrap: wrap;
			height: auto;
			color: #093E3E;
			font-size: 13px;
			line-height: 22px;
			// word-wrap: break-word;
		}
	}

	.item-box-bottom {
		width: 736rpx;
		height: 84rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/video-alone/spjs-box-bottom.png') no-repeat center center;
		background-size: 100% 100%;
	}

	.weibu {

		width: 750rpx;
		height: 408rpx;
		background: url('https://qingchenghai-1.oss-cn-hangzhou.aliyuncs.com/static/jiaoxue/weibu.png') no-repeat center center;
		background-size: 100% 100%;
		margin-top: -200rpx;
	}

	.gundong-box {
		width: 100%;
		height: 60rpx;
		margin-top: 360rpx;
		white-space: nowrap;
	}

	.btn-box {
		width: 92rpx;
		height: 52rpx;
		border: 2px solid #fff;
		border-radius: 16rpx;
		background: rgba(207, 187, 17, 0.6);
		margin: 0 6rpx;
		color: #F3F3F3;
		text-align: center;
		line-height: 52rpx;
		font-size: 12px;
		display: inline-block;
	}

	.btn-box.active {
		background: rgba(255, 255, 255, 0.6);
		color: #232323;
	}

	.arr-box {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 0 20rpx;
		margin-top: 56rpx;
	}

	.pic {
		width: 72rpx;
		height: 72rpx;
	}

	.arr-box.active {
		background: #79B1A3;
	}

	.item-box-mid-title {
		text-align: center;
		font-size: 14px !important;
		margin-bottom: 20rpx;
	}
</style>
